(function () {
  function init() {
    model.init();  // 阻止数据 + 数据监听操作 / 数据代理
    view.render();  // 阻止HTML模板 + 渲染HTML模块
    controller.init(); // 事件处理函数定义与绑定
  }

  var model = {
    data: {
      a: 0,
      b: 0,
      s: '+',
      r: 0
    },
    init: function() {
      var _this = this;
      for(var k in _this.data) {
        (function (k) {
          Object.defineProperty(_this, k, {
            get: function() {
              return _this.data[k];
            },
            set: function(newValue) {
              _this.data[k] = newValue;
            }
          })
        })(k);
      }
    }
  }

  // calculator
  var view = {
    el: "#app",
    template: `
      <p>
        <span class="cal-a">{{ a }}</span>
        <span class="cal-s">{{ s }}</span>
        <span class="cal-d">{{ b }}</span>
        <span>=</span>
        <span class="cal-r">{{ r }}</span>
      </p>
      <p>
        <input type="text" placeholder="Number a" class="cal-input a"/>
        <input type="text" placeholder="Number b" class="cal-input b"/>
      </p>
      <p>
      <p>
        <button class="cal-btn">+</button>
        <button class="cal-btn">-</button>
        <button class="cal-btn">*</button>
        <button class="cal-btn">/</button>
      </p>
    `,
    render: function(mutedData) {
      if(!mutedData) {
        this.template = this.template.replace(/\{\{(.*?)\}\}/g, 
        function(node, key) {

          return model[key.trim()];
        })
        var container = document.createElement('div');
        container.innerHTML = this.template;
        console.log(this.template);
        // document.querySelector(this.el).appendChild(container);
        
      }
    }
  }

  var controller = {
    init() {

    }
  }

  init();
})();


